<template>
	<view class="info" v-if="info !== null">
		<view class="thumb">
			<image :src="info.cover" mode="aspectFit" style="width: 200rpx; height: 300rpx;"></image>
		</view>
		<view class="name-bar">
			<view class="" style="flex: 1;">
				<view class="name">{{ info.name }}</view>
				<view class="author">{{ info.author }}</view>
			</view>
			
			<view class="" style="font-size: 24rpx; color: #ccc;">
				<view class="categories">
					{{ category }}
				</view>
				<view class="count">
					{{ count }}
				</view>
			</view>
			
		</view>
	</view>
	
</template>

<script>
	export default{
		data(){
			return {
				categories: [],
				chapters: [],
				pages: []
			}
		},
		props: ['info'],
		created() {
			this.info.categories.shift()
			this.categories = this.info.categories
			delete this.info.categories
			this.info = this.info
		},
		computed: {
			count() {
				const count = [];
				if(this.info.type == 'txt') {
					const str = this.info.words_count.length > 4 
						? (this.info.words_count / 10000).toFixed(2) + ' 万字' 
						: this.info.words_count + ' 字'
					count.push(str)
				}
				if(this.info.page_count > 0) {
					count.push("全 "+this.info.page_count+"回")
				}
				return count.join(" | ")
			},
			category() {
				const arr = this.categories.map(item => item.name)
				return "类属：" + arr.join(" - ")
			}
		}
	}
</script>

<style scoped>
	.info{
		display: flex;
		padding: 40rpx 30rpx;
		background-color: #333;
		color: #fff;
		min-height: 300rpx;
	}
	.thumb{
		margin-right: 30rpx;
	}
	.name-bar{
		display: flex;
		flex-direction: column;
		line-height: 2;
		margin: 10rpx 0;
	}
	.name {
		font-size: 40rpx;
	}
	.categories span{
		margin-right: 20rpx;
	}
	.count span {
		padding-right: 10rpx;
	}
		
	.count span + span :after{
		content: "|";
		padding-left: 10rpx;
	}
</style>